<template>
  <el-drawer v-model="useGlobal.globalConfig.openDrawer" title="布局设置" size="430px">
    <!-- 全局主题 -->
    <el-divider class="divider" content-position="center">
      <el-icon><ColdDrink /></el-icon>
      全局主题
    </el-divider>
    <div class="theme-item">
      <span>主题颜色</span>
      <el-color-picker v-model="useGlobal.globalConfig.sysPrimary" :predefine="colorList" @change="changePrimary" />
    </div>
    <div class="theme-item">
      <span>菜单主题</span>
      <el-color-picker v-model="useGlobal.globalConfig.menuPrimary" :predefine="colorList" @change="changeMenuPrimary" />
    </div>
    <div class="theme-item">
      <span>暗黑模式</span>
      <SwitchDark />
    </div>
    <!-- 界面设置 -->
    <el-divider class="divider" content-position="center">
      <el-icon><Setting /></el-icon>
      界面设置
    </el-divider>
    <div class="theme-item">
      <span>菜单折叠</span>
      <el-switch v-model="useGlobal.globalConfig.isCollapse" />
    </div>
    <div class="theme-item">
      <span>面包屑</span>
      <el-switch v-model="useGlobal.globalConfig.breadcrumb" />
    </div>
    <div class="theme-item">
      <span>面包屑图标</span>
      <el-switch v-model="useGlobal.globalConfig.breadcrumbIcon" />
    </div>
    <div class="theme-item">
      <span>标签栏</span>
      <el-switch v-model="useGlobal.globalConfig.tabs" />
    </div>
    <div class="theme-item">
      <span>标签栏图标</span>
      <el-switch v-model="useGlobal.globalConfig.tabsIcon" />
    </div>
    <div class="theme-item">
      <span>页脚</span>
      <el-switch v-model="useGlobal.globalConfig.footer" />
    </div>
    <el-divider class="divider" content-position="center">
      <el-icon><Notification /></el-icon>
      布局样式
    </el-divider>
    <div class="theme-item" v-if="IS_PANORAMA">
      <span>全景菜单</span>
      <el-switch v-model="useGlobal.globalConfig.isPanorama" />
    </div>
    <div class="theme-item">
      <span>布局大小</span>
      <el-select v-model="useGlobal.globalConfig.assemblySize" style="width: 100px">
        <el-option
          v-for="item in assemblySizeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.value === useGlobal.globalConfig.assemblySize"
        />
      </el-select>
    </div>
    <el-button type="primary" @click="saveConfig">保存配置</el-button>
  </el-drawer>
</template>

<script setup lang="ts">
import type { AssemblySizeType } from "@/typings";
import SwitchDark from "../SwitchDark/index.vue";
import { DEFAULT_PRIMARY, IS_PANORAMA } from "@/config";
import { useGlobalStore, useUserStore } from "@/stores";
import { useTheme } from "@/hooks/useTheme";
import { updateConfig } from "@/api/index";
import { ElMessage } from "element-plus";

defineOptions({
  name: "ThemeDrawer"
});

const useGlobal = useGlobalStore();
const { changePrimary } = useTheme();
const { changeMenuPrimary } = useTheme();
const assemblySizeList: Array<{ label: string; value: AssemblySizeType }> = [
  { label: "默认", value: "default" },
  { label: "大型", value: "large" },
  { label: "小型", value: "small" }
];

// 预定义主题颜色
const colorList = [
  DEFAULT_PRIMARY,
  "#daa96e",
  "#0c819f",
  "#409eff",
  "#27ae60",
  "#ff5c93",
  "#e74c3c",
  "#fd726d",
  "#f39c12",
  "#9b59b6"
];

// 保存配置
const userStore = useUserStore();
const saveConfig = async () => {
  try {
    const config = {
      userId: userStore.userInfo.userId,
      lang: useGlobal.globalConfig.lang,
      sysPrimary: useGlobal.globalConfig.sysPrimary,
      menuPrimary: useGlobal.globalConfig.menuPrimary,
      isDark: useGlobal.globalConfig.isDark ? "0" : "1",
      isCollapse: useGlobal.globalConfig.isCollapse ? "0" : "1",
      breadcrumb: useGlobal.globalConfig.breadcrumb ? "0" : "1",
      breadcrumbIcon: useGlobal.globalConfig.breadcrumbIcon ? "0" : "1",
      tabs: useGlobal.globalConfig.tabs ? "0" : "1",
      tabsIcon: useGlobal.globalConfig.tabsIcon ? "0" : "1",
      assemblySize: useGlobal.globalConfig.assemblySize
    };
    const res = await updateConfig(config);
    if (res.code !== 200) {
      return ElMessage.error(res.message);
    }
    ElMessage.success("保存成功");
    useGlobal.globalConfig.openDrawer = false;
  } catch (error) {
    console.error("保存配置失败");
  }
};
</script>

<style scoped lang="scss">
.divider {
  margin-top: 15px;
  .el-icon {
    position: relative;
    top: 2px;
    right: 5px;
    font-size: 15px;
  }
}
.theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  margin: 14px 0;
  span {
    display: flex;
    align-items: center;
    font-size: 14px;
    .el-icon {
      margin-left: 3px;
      font-size: 15px;
      color: var(--el-text-color-regular);
      cursor: pointer;
    }
  }
}
.layout-box {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 15px 7px 0;
  .layout-item {
    position: relative;
    box-sizing: border-box;
    width: 100px;
    height: 70px;
    padding: 6px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px var(--el-border-color-dark);
    transition: all 0.2s;
    .layout-dark {
      background-color: var(--el-color-primary);
      border-radius: 3px;
    }
    .layout-light {
      background-color: var(--el-color-primary-light-5);
      border-radius: 3px;
    }
    .layout-content {
      background-color: var(--el-color-primary-light-8);
      border: 1px dashed var(--el-color-primary);
      border-radius: 3px;
    }
    .el-icon {
      position: absolute;
      right: 10px;
      bottom: 10px;
      color: var(--el-color-primary);
      transition: all 0.2s;
    }
    &:hover {
      box-shadow: 0 0 5px 1px var(--el-text-color-secondary);
    }
  }
  .is-active {
    box-shadow: 0 0 0 2px var(--el-color-primary) !important;
  }
  .layout-vertical {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .layout-dark {
      width: 20%;
    }
    .layout-container {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 72%;
      .layout-light {
        height: 20%;
      }
      .layout-content {
        height: 67%;
      }
    }
  }
  .layout-classic {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
    .layout-dark {
      height: 22%;
    }
    .layout-container {
      display: flex;
      justify-content: space-between;
      height: 70%;
      .layout-light {
        width: 20%;
      }
      .layout-content {
        width: 70%;
      }
    }
  }
  .layout-transverse {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 15px;
    .layout-dark {
      height: 20%;
    }
    .layout-content {
      height: 67%;
    }
  }
  .layout-columns {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    .layout-dark {
      width: 14%;
    }
    .layout-light {
      width: 17%;
    }
    .layout-content {
      width: 55%;
    }
  }
}
</style>
